<template>
  <div class="seckill" :class='{seckillWill:downObj.flag}'>
    <!-- 秒杀状态 -->
    <div class="seckillLeft" v-if='!downObj.flag'>
    	<div class="leftTop">
    		<span><em>￥</em>{{Number(seckillShopMess.PRICE).toFixed(2).split('.')[0]}}.<em>{{Number(seckillShopMess.PRICE).toFixed(2).split('.')[1]}}</em></span>
    		<label>剩余{{seckillShopMess.TOTAL_NUM-seckillShopMess.SALE_NUM>0?seckillShopMess.TOTAL_NUM-seckillShopMess.SALE_NUM:0}}件</label>
    	</div>
    	<div class="leftBottom">
    		<img src="../assets/image/carProduct/seckillC.png" alt="" />
    		<s>￥{{seckillShopMess.OPRICE}}</s>
    	</div>
    </div>
    <!-- 秒杀预告 -->
    <div class="seckillLeft seckwill" v-if='downObj.flag'>
    	<img src="../assets/image/carProduct/seckillLogo.png" class="seckilllogo" alt="" />
      <h1>预计{{downObj.day}}日{{downObj.h}}:{{downObj.m}}开抢</h1>
    </div>
    <div class="seckillRight" v-if='!downObj.flag'>
    	<div class="rightL">
    		<h1 v-if='!downObj.flag'>距离抢购结束还剩</h1>
    		<div class="timeDown seckwillDown">
    			<span>{{downObj.H}}</span>:
	    		<span>{{downObj.M}}</span>:
	    		<span>{{downObj.S}}</span>
    		</div>
    		
    	</div>
    </div>
  </div>
</template>
<script>
/*秒杀横幅*/
export default {
  name:"seckill",
  // 数据
  data(){

    return{
    	seckillMess:'',
    	downObj:{}  //倒计时参数
    }
  },
  props:['seckillShopMess'],
  // 计算属性
  computed:{
     seckillMesss(){
     	return this.seckillShopMess;
     }
  },
  // 创建（实例创建完成）
  created(){
    this.seckillMess=this.seckillMesss;
    this.countDown();
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
  	//倒计时
  	countDown(){
  		setInterval(()=>{
  			this.computerTime();
  		},500)
  	},
  	// 计算时间
    computerTime(){
      let times=new Date().getTime();
      let flag=false;
      let H=0;
      let M=0;
      let S=0;
      if(times<this.seckillMess.START_DATE&&this.seckillMess.IS_SECKILLING==0){
        flag=true;//秒杀预告
        let timeNum=this.seckillMess.START_DATE-times;
    		H=parseInt(timeNum/(3600*1000));
    		M=parseInt((timeNum-H*3600*1000)/(60*1000));
    		S=parseInt((timeNum-H*3600*1000-M*60*1000)/1000);
      }else{
        flag=false;
      	if(times<this.seckillMess.END_DATE){
      		let timeNum=this.seckillMess.END_DATE-times;
      		H=parseInt(timeNum/(3600*1000));
      		M=parseInt((timeNum-H*3600*1000)/(60*1000));
      		S=parseInt((timeNum-H*3600*1000-M*60*1000)/1000);
      	}
      }
      H=this.filterNum(H);
      M=this.filterNum(M);
      S=this.filterNum(S);
      if(flag){
      	let day=new Date(this.seckillMess.START_DATE).getDate();
      	let h=new Date(this.seckillMess.START_DATE).getHours();
      	let m=this.filterNum(new Date(this.seckillMess.START_DATE).getMinutes());
      	this.downObj={flag:flag,H:H,M:M,S:S,day:day,h:h,m:m}
      }else{
      	this.downObj={flag:flag,H:H,M:M,S:S}
      }
      
    },
    //过滤时间
    filterNum(num){
    	return num>=10?num:'0'+num;
    }
  },
  // 子组件
  components:{
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.seckill{
  height: 1rem;
  width: 7.5rem;
  position: relative;
  margin-top: 0.2rem;
  background: url('../assets/image/carProduct/seckillIng.png') no-repeat;
  background-size: 7.5rem 1rem;
  display: flex;
  padding: 0 0.3rem;
  justify-content:space-between;
  .seckillLeft{
  	.leftTop{
  		display: flex;
  		align-items:center;
  		height: 0.6rem;
  		span{
  			font-size: 0.38rem;
  			color: #fff;
  			margin-right: 0.1rem;
  			em{
  				font-style: normal;
  				font-size: 0.28rem;
  			}
  		}
  		label{
  			font-size: 0.18rem;
  			width: 1.48rem;
  			height: 0.4rem;
  			line-height: 0.4rem;
  			display: inline-block;
  			color: #fff;
  			background: url('../assets/image/carProduct/number.png') no-repeat;
  			background-size: 1.48rem 0.4rem;
  		}
  	}
  	.leftBottom{
  		display: flex;
  		align-items:center;
		s{
			font-size: 0.22rem;
			color: #fff;
			padding-left: 0.1rem;
		}
  		img{
			width: 1.16rem;
			height: 0.26rem;
  		}
  	}
  }
  .seckwill{
  	   display: flex;
  	   align-items:center;
  		img{
  			width: 0.67rem;
  			height: 0.63rem;
  		}
      .seckilllogo{
        width: 1.16rem;
        height: 0.26rem;
      }
  		span{
  			font-size: .42rem;
  			margin: 0 0.1rem 0 0.2rem;
  			color: #fff;
  			font-weight: 550;
  			em{
  				font-style: normal;
  				font-size: 0.32rem;
  			}
  		}
      h1{
        font-size: 0.25rem;
        color: #fff;
        padding-left: 0.2rem;
      }
  		s{
  			font-size: 0.3rem;
  			margin-top: 0.07rem;
  			color: #fff;
  		}
  	}
  	.seckwillDown{
  	}
  .seckillRight{
  	display: flex;
  	align-items:center;
  	justify-content:space-between;
  	.rightL{
  		height: 1rem;
  		line-height: 0.5rem;
  		h1{
  			font-size: 0.23rem;
  			color: #fff;
  		}
  		.timeDown{
  			display: flex;
  			justify-content:center;
  			font-size: 0.2rem;
  			color: #fff;
  			line-height: 0.38rem;
  			span{
	  			font-size: 0.26rem;
	  			display: inline-block;
	  			margin:0 0.04rem;
	  			height: 0.4rem;
	  			line-height: 0.4rem;
	  			color: #fff;
          font-weight:600;
	  		}
  		}
  	}
  	.rightR{
  		display: flex;
  		margin-left: 0.2rem;
  		img{
  			width: 0.16rem;
  			height: 0.28rem;
  		}
  	}
  }
}
.seckillWill{
	background: url('../assets/image/carProduct/seckillWill.png') no-repeat;
    background-size: 7.5rem 1rem;
}
</style>